<template>
  <!-- <div style="height: 800px"> -->
  <lay-table
    ref="tableRef"
    :resize="true"
    maxHeight="720px"
    style="width: 100%"
    :columns="innerColumns"
    v-bind="getBindValues"
    :data-source="tableData"
    @change="handleTableChange"
    @cellDouble="cellDouble"
    v-model:selected-keys="selectedKeys"
    v-model:selectedKey="selectedKey"
    @sortChange="sortChange"
    @row="rowClick"
  >
    <template #toolbar>
      <TableCustom :innerColumns="innerColumns">
        <template #btns>
          <div v-for="(item, index) in btnsArr" :key="index">
            <!-- <lay-button type="primary" v-if="item.disType == '10'"
                @click="clickBtn(item)">{{ item.name }}</lay-button> -->
            <DcodeButton
              :selectedKeys="selectedKeys"
              :selectedKey="selectedKey"
              v-bind="item"
              :tableData="tableData"
              :tableRef="tableRef"
              @reset="reset"
              :pageId="pageId"
              v-if="item.disType == '10'"
              >{{ item.name }}
            </DcodeButton>
          </div>
        </template>
      </TableCustom>
    </template>
    <template
      v-for="(item, index) in customSlotArr"
      :key="index"
      #[item]="{ row, column }"
    >
      <img
        :src="row[item]"
        alt=""
        srcset=""
        v-if="column.showType == 'image'"
      />
      <lay-switch
        v-model="row[item]"
        v-if="column.showType == 'radio'"
      ></lay-switch>
      <div v-if="column.hyperlink">
        <div v-for="(it, index) in disType30btn" :key="index">
          <DcodeButton
            v-bind="it"
            :pageId="pageId"
            :tableRef="tableRef"
            @reset="reset"
            :row="row"
            v-if="it.linkcolumn == row['code']"
            :linkcolumnName="formatInitDate(column, row[item])"
            >{{ formatInitDate(column, row[item]) }}</DcodeButton
          >
        </div>
      </div>
    </template>
    <template
      v-for="(item, index) in eleArr"
      :key="index"
      #[item]="{ row, column }"
    >
      <template v-if="column.eleType == 1">
        <div v-if="isShowTableBtn(column)">
          <div v-for="(it, index) in disType30btn" :key="index">
            <DcodeButton
              v-bind="it"
              :pageId="pageId"
              :tableRef="tableRef"
              @reset="reset"
              :row="row"
              v-if="it.linkcolumn == row['code']"
              :linkcolumnName="row[item]"
              >{{ row[item] }}</DcodeButton
            >
          </div>
        </div>
        <div v-else><custom-tip :text="row[item]"></custom-tip></div>
      </template>

      <template v-else-if="column.eleType == 3">
        <div v-if="isShowTableBtn(column)">
          <div v-for="(it, index) in disType30btn" :key="index">
            <DcodeButton
              v-bind="it"
              :pageId="pageId"
              :tableRef="tableRef"
              @reset="reset"
              :row="row"
              v-if="it.linkcolumn == row['code']"
              :linkcolumnName="row[item]"
              >{{ row[item] }}</DcodeButton
            >
          </div>
        </div>
        <lay-checkbox
          v-else
          skin="primary"
          :modelValue="!!Number(row[item])"
        ></lay-checkbox
      ></template>

      <template v-else-if="column.eleType == 4">
        <div v-if="isShowTableBtn(column)">
          <div v-for="(it, index) in disType30btn" :key="index">
            <DcodeButton
              v-bind="it"
              :pageId="pageId"
              :tableRef="tableRef"
              @reset="reset"
              :row="row"
              v-if="it.linkcolumn == row['code']"
              :linkcolumnName="formatInitDate(column, row[item])"
              >{{ formatInitDate(column, row[item]) }}</DcodeButton
            >
          </div>
        </div>
        <div v-else>{{ formatInitDate(column, row[item]) }}</div>
      </template>

      <template v-else-if="column.eleType == 6">
        <div v-if="isShowTableBtn(column)">
          <div v-for="(it, index) in disType30btn" :key="index">
            <DcodeButton
              v-bind="it"
              :pageId="pageId"
              :tableRef="tableRef"
              @reset="reset"
              :row="row"
              v-if="it.linkcolumn == row['code']"
              :linkcolumnName="getCodeListValue(column.codeTypeId, row[item])"
              >{{ getCodeListValue(column.codeTypeId, row[item]) }}
            </DcodeButton>
          </div>
        </div>
        <div v-else>{{ getCodeListValue(column.codeTypeId, row[item]) }}</div>
      </template>

      <template v-else-if="['7', '10'].includes(column.eleType)">
        <div v-if="isShowTableBtn(column)">
          <div v-for="(it, index) in disType30btn" :key="index">
            <DcodeButton
              v-bind="it"
              :pageId="pageId"
              :tableRef="tableRef"
              @reset="reset"
              :row="row"
              v-if="it.linkcolumn == row['code']"
              :linkcolumnName="getRefDateValue(row, column.code)"
              >{{ getRefDateValue(row, column.code) }}
            </DcodeButton>
          </div>
        </div>
        <div v-else>{{ getRefDateValue(row, column.code) }}</div>
      </template>

      <template v-else-if="column.eleType == 8 && row.REFDATA[`${item}NAME`]">
        <custom-file
          v-for="(i, index) in row.REFDATA[`${item}NAME`].split(',')"
          :data="i"
          :key="index"
        ></custom-file>
      </template>

      <template v-else-if="column.eleType == 9 && row.REFDATA[`${item}NAME`]">
        <custom-img
          v-for="(i, index) in row.REFDATA[`${item}NAME`].split(',')"
          :data="i"
          :key="index"
        ></custom-img>
      </template>
      <template v-else>
        <div v-if="isShowTableBtn(column)">
          <div v-for="(it, index) in disType30btn" :key="index">
            <DcodeButton
              v-bind="it"
              :pageId="pageId"
              :tableRef="tableRef"
              @reset="reset"
              :row="row"
              v-if="it.linkcolumn == row['code']"
              :linkcolumnName="row[item]"
              >{{ row[item] }}
            </DcodeButton>
          </div>
        </div>
        <div v-else>{{ row[item] }}</div>
      </template>
    </template>
    <template
      v-for="(item, index) in editArr"
      #[item]="{ row, column }"
      :key="index"
    >
      <lay-date-picker
        type="time"
        v-if="column.eleDisType == '15'"
        v-model="row[item]"
      ></lay-date-picker>
      <lay-date-picker
        type="date"
        v-else-if="column.eleDisType == '20'"
        v-model="row[item]"
      ></lay-date-picker>
      <lay-date-picker
        type="datetime"
        v-else-if="column.eleDisType == '21'"
        v-model="row[item]"
      ></lay-date-picker>
      <lay-date-picker
        type="year"
        v-else-if="column.eleDisType == '41'"
        v-model="row[item]"
      ></lay-date-picker>
      <lay-date-picker
        type="yearmonth"
        v-else-if="column.eleDisType == '42'"
        v-model="row[item]"
      ></lay-date-picker>
      <lay-input-number
        v-else-if="column.eleDisType == '40'"
        v-model="row[item]"
      ></lay-input-number>
      <lay-input-number
        v-else-if="column.eleDisType == '50'"
        v-model="row[item]"
      ></lay-input-number>
      <lay-select
        v-else-if="column.eleDisType == '60'"
        v-model="row[item]"
        placeholder="请选择"
      >
        <lay-select-option
          :key="index"
          v-for="(item, index) in getCodeList(column.codeTypeId)"
          :value="item.label"
          :label="item.label"
        ></lay-select-option>
      </lay-select>
      <lay-radio-group
        v-else-if="column.eleDisType == '62'"
        v-model="row[item]"
      >
        <lay-radio
          :key="index"
          v-for="(item, index) in getCodeList(column.codeTypeId)"
          :value="item.value"
          >{{ item.label }}</lay-radio
        >
      </lay-radio-group>
      <lay-input v-model="row[item]" v-else></lay-input>
    </template>
    <template #INDEX="{ rowIndex }">
      <span v-if="getBindValues.page">{{
        (getBindValues.page.current - 1) * getBindValues.page.limit +
        rowIndex +
        1
      }}</span>
      <span>{{ rowIndex + 1 }}</span>
    </template>
    <template #ACTIO="{ row }">
      <template v-for="(item, index) in btnsArr" :key="index">
        <DcodeButton
          v-bind="item"
          :pageId="pageId"
          :tableRef="tableRef"
          @reset="reset"
          :row="row"
          v-if="item.disType == '20'"
          >{{ item.name }}</DcodeButton
        >
      </template>
    </template>
  </lay-table>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { useSlots } from "vue";
import { dynamicTableEmits, dynamicTableProps } from "./dynamic-table";
import { useTableState } from "./hooks/useTableState";
import { useTableMethods } from "./hooks/useTableMethods";
import { useColumns } from "./hooks/useColumns";
import { createTableContext } from "./hooks/useTableContext";
import { useSystemStore } from "../../../store/login";
import DcodeButton from "../../button/index.vue";
import TableCustom from "./components/table-settings/index.vue";

import CustomTip from "./components/custom/custom-tip.vue";
import CustomImg from "./components/custom/custom-img.vue";
import CustomFile from "./components/custom/custom-file.vue";

import dayjs from "dayjs";
const systemStore = useSystemStore();

const props = defineProps(dynamicTableProps);

const emit = defineEmits(dynamicTableEmits);
const slots = useSlots();
const getCodeList = (codeTypeId) => {
  const codeList = systemStore.codeTableList.get(codeTypeId);

  return codeList
    .map((code: { name: any; code: any }) => ({
      ...code,
      label: code.name,
      value: code.code,
      skin: "primary",
    }))
    .sort((a, b) => a.orderId - b.orderId);
};

// 表格内部状态
const tableState = useTableState({ props, slots });
const {
  tableRef,
  loadingRef,
  tableData,
  getBindValues,
  selectedKeys,
  selectedKey,
} = tableState;
// 表格内部方法
const tableMethods = useTableMethods({ state: tableState, props, emit });
const {
  fetchData,
  reset,
  handleTableChange,
  cellDouble,
  rowClick,
  sortChange,
} = tableMethods;
// 表格列的配置描述
const { innerColumns, editArr, customSlotArr, eleArr } = useColumns({
  props,
  slots,
  state: tableState,
  methods: tableMethods,
});
const disType30btn =
  props?.btnsArr?.filter((ele: any) => ele.disType == "30") || [];
const getValues = (
  codeTypeId: any,
  codeArrStr: any,
  getItemFunction: (codeTypeId: any, code: any) => any,
) => {
  const codeArr = codeArrStr ? codeArrStr.split(",") : [];
  const newArr = codeArr.map((code: any) => getItemFunction(codeTypeId, code));
  return newArr.join(",");
};

const getItem = (codeTypeId: any, code: any) => {
  const codeArr = systemStore.codeTableList.get(codeTypeId);
  if (codeArr) {
    const item = codeArr.find((item) => item.code === code);
    return item ? item.name : "-";
  } else {
    return "-";
  }
};

const getRefDateItem = (
  row: { [x: string]: { [x: string]: any } },
  code: any,
) => {
  const key = `${code}NAME`;
  return row["REFDATA"]?.[key];
};

const getCodeListValue = (codeTypeId: any, codeArrStr: any) => {
  return getValues(codeTypeId, codeArrStr, getItem);
};

const getRefDateValue = (
  row: { [x: string]: { [x: string]: any } },
  codeArrStr: any,
) => {
  return getValues(row, codeArrStr, getRefDateItem);
};

const formatInitDate = (column, value) => {
  return column.eleDisType === "42"
    ? dayjs(value + "").format("YYYY-MM")
    : value;
};
const instance = Object.assign({}, props, tableState, tableMethods, emit);

createTableContext(instance);
// fetchData();

defineExpose(instance);

const isShowTableBtn = (columnInfo: any) => {
  // 过滤出 disType 为 "30" 的按钮列表
  let btn30List =
    props?.btnsArr?.filter((ele: any) => ele.disType === "30") || [];

  // 检查 btn30List 中是否包含 columnInfo['code']
  const isColumnCodeInBtn30List = btn30List.some(
    (btn: any) => btn.linkColumn === columnInfo["code"],
  );

  return isColumnCodeInBtn30List;
};
</script>

<style scoped lang="less">
:deep(.lay-tooltip-content) {
  white-space: unset;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.operate-hyperlink {
  cursor: pointer;
  color: #1e9fff;
}
</style>
